<template>
	<div class="page_user" id="user_password">
		<div class="warp">
			<div class="container">
				<div class="row justify-content-between">
					<div class="col-12 col-md-3">
						<div class="card_menu">
							<!-- 左侧边栏 -->
							<list_menu_user :list_info="list_info"></list_menu_user>
						</div>
					</div>
					<div class="col-12 col-md-9">
						<div class="card_password pl-2">
							<div>{{ t('changePassword') }}</div>
							<!-- 密码修改 -->
							<b-form>
								<b-form-group id="input-group-2" :label="t('enterOriginalPassword') + ':'" label-for="input-2"
									:state="validation_o_password" :invalid-feedback="t('passwordLengthError')"
									:valid-feedback="t('validationPassed')">
									<b-form-input id="input-2" v-model="form.o_password" type="password"
										:placeholder="t('originalPassword')" trim></b-form-input>
								</b-form-group>
								<b-form-group id="input-group-2" :label="t('setNewPassword') + ':'" label-for="input-2"
									:state="validation_password" :invalid-feedback="t('passwordLengthError')" :valid-feedback="t('validationPassed')">
									<b-form-input id="input-2" v-model="form.password" type="password"
										:placeholder="t('setNewPassword')" trim></b-form-input>
								</b-form-group>
								<b-form-group id="input-group-2" :label="t('confirmPassword') + ':'" label-for="input-2"
									:state="validation_confirm_password" :invalid-feedback="t('passwordMismatch') || '密码不一致'" valid-feedback="">
									<b-form-input id="input-2" v-model="confirm_password" type="password"
										:placeholder="t('confirmPassword')" trim></b-form-input>
								</b-form-group>
							</b-form>
							<div class="password_confim">
								<div class="btn_item" @click="change_password()">{{ t('confirmModify') }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mixin from "@/mixins/page.js";
	import mixinI18n from "@/mixins/i18n.js";
	import list_menu_user from "@/components/diy/list_menu_user.vue";

	export default {
		mixins: [mixin, mixinI18n],

		data() {
			return {
				form: {
					o_password: "",
					password: "",
				},

				confirm_password: "",
			};
		},
		computed: {
			list_info() {
				return [{
					title: this.t('personalInfo'),
					url: "/user/info",
					icon: "house-fill",
					selected: false,
				},
				{
					title: this.t('changePassword'),
					url: "/user/password",
					icon: "person-fill",
					selected: true,
				},
				{
					title: this.t('favorites'),
					url: "/user/collect",
					icon: "heart-fill",
					selected: false,
				},
				];
			},
			/**
			 * 验证原始密码
			 */
			validation_o_password() {
				var length = this.form.password.length;
				if (!length) {
					return null;
				}
				return length > 4 && length < 17;
			},
			/**
			 * 验证密码
			 */
			validation_password() {
				var length = this.form.password.length;
				if (!length) {
					return null;
				}
				return length > 4 && length < 17;
			},
			/**
			 * 再次验证密码
			 */
			validation_confirm_password() {
				return this.confirm_password === this.form.password;
			},
		},
		methods: {
			/**
			 * 修改密码
			 */
			change_password() {
				var form = Object.assign({},this.form);

				if(this.form.password === this.confirm_password && this.form.o_password){
					this.$post("~/api/user/change_password?", form, (res) => {
						if (res.result) {
							//弹出更改成功，3秒后调到主页，退出账户
							this.$store.commit("sign_out");
							this.$router.push("/account/login")
						} else if (res.error) {
							console.log(res.error);
							this.$toast(res.error.message,"error");
						}
					});
				}
			},
		},
		components: {
			list_menu_user,
		},
		mounted() {
			// console.log(this.user);
		},
	};
</script>

<style scoped>
	.container {
		min-height: 800px;
	}

	.btn_item {
		cursor: pointer;
		width: 100%;
		background-color: var(--color_primary);
		color: #fff;
		text-align: center;
		height: 48px;
		line-height: 48px;
	}

	.card_password {
		padding: 10px;
		width: 500px;
		margin: auto;
	}
</style>
